<template>
  <div class="faultList">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>故障列表</span>
          <el-button class="button" text>清除</el-button>
        </div>
      </template>
      <div v-for="o in 4" :key="o" class="text item">
        {{ "List item " + o }}
      </div>
    </el-card>
  </div>
</template>

<script setup>
</script>

<style lang="scss" scoped>
:deep(.box-card) {
  .el-card__header {
    padding:10px 15px;
  }
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .el-card__body {
    padding: 10px 15px;
  }
  .fieldChild {
    width: 350px;
    padding: 0 10px;
  }
}

.faultList {
  :deep(.box-card) {
    margin:5px 5px;
    min-height:80vh;
    .card__header {
      padding: 6px 10px;
    }
  }
}
.text {
  font-size: 14px;
}
</style>
